<template>
  <div class="table-title">
    <a-button type="primary" @click="showCharts = !showCharts">
      <line-chart-outlined/>
    </a-button>
  </div>
  <!-- 表格 -->
  <a-table :data-source="data" :scroll="{y:600}" class="scroll-y-table">
    <a-table-column :width="100" key="Id" title="编号" data-index="Id">
      <template v-slot="{index}">{{ index + 1 }}</template>
    </a-table-column>
    <a-table-column key="name" title="用户名" data-index="user_name"/>
    <a-table-column key="operation" title="登录时间" data-index="time"></a-table-column>
  </a-table>
  <!-- 图表 -->
  <a-modal title="登录信息统计" v-model:visible="showCharts" width="1100px" :footer="null">
    <LoginEcharts :data="data"/>
  </a-modal>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {getLoginLog} from "@/apis/log";
import {LineChartOutlined} from '@ant-design/icons-vue'
import LoginEcharts from "@/components/LogView/LoginEcharts.vue";
import type {VideoLog as Log} from '@/types/Log';


const data = ref<Log[]>([]);
const loadData = async () => {
  const {data: v}: { data: { data: Log[] } } = await getLoginLog();
  v.data.forEach(v => {
    v.timeObj = new Date(v.time);
    v.time = v.timeObj.toLocaleString();
  });
  data.value = v.data;
}
loadData();

const showCharts = ref(false);

</script>

<style scoped>

</style>